<template>
  <div class="p-8">
    <h1 class="text-2xl font-bold mb-4">路径别名测试</h1>
    
    <!-- 测试组件导入 -->
    <div class="space-y-4">
      <ModernCard title="路径别名测试成功">
        <p>如果您能看到这个卡片，说明 @/ 路径别名配置正确！</p>
        
        <template #footer>
          <ModernButton variant="primary">
            测试按钮
          </ModernButton>
        </template>
      </ModernCard>

      <!-- 测试主题切换 -->
      <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-800 rounded-md">
        <span>主题切换测试：</span>
        <ThemeSwitcher />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 使用 @/ 路径别名导入
import ModernCard from '@/components/ui/ModernCard.vue'
import ModernButton from '@/components/ui/ModernButton.vue'
import ThemeSwitcher from '@/components/ui/ThemeSwitcher.vue'
</script>
